import {Component, Input, OnInit} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Fill, RegularShape, Stroke, Style} from 'ol/style.js';

@Component({
    selector: 'kylin-layer-z-index',
    templateUrl: './layer-z-index.component.html',
    styleUrls: ['./layer-z-index.component.less']
})
export class LayerZIndexComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    originCenter: any;
    originZoom: any;
    layers: any;

    constructor() {
    }

    ngOnInit() {
        this.turnOn();
    }

    turnOn() {
        const stroke = new Stroke({color: 'black', width: 1});

        const styles = {
            'square': new Style({
                image: new RegularShape({
                    fill: new Fill({color: 'blue'}),
                    stroke: stroke,
                    points: 4,
                    radius: 80,
                    angle: Math.PI / 4
                })
            }),
            'triangle': new Style({
                image: new RegularShape({
                    fill: new Fill({color: 'red'}),
                    stroke: stroke,
                    points: 3,
                    radius: 80,
                    rotation: Math.PI / 4,
                    angle: 0
                })
            }),
            'star': new Style({
                image: new RegularShape({
                    fill: new Fill({color: 'green'}),
                    stroke: stroke,
                    points: 5,
                    radius: 80,
                    radius2: 4,
                    angle: 0
                })
            })
        };


        const layer0 = this.createLayer([110, 30], styles['star'], 0);
        const layer1 = this.createLayer([110, 30], styles['square'], 1);
        const layer2 = this.createLayer([110, 30], styles['triangle'], 0);

        this.layers = [layer0, layer1, layer2];
        this.map.addLayer(layer1);
        this.map.addLayer(layer2);
        this.map.addLayer(layer0);
        const originView = this.map.getView();
        this.originCenter = originView.getCenter();
        this.originZoom = originView.getZoom();
        originView.setCenter([110, 30]);
        originView.setZoom(4);
    }

    changeZIndex(evt, layerIdx) {
        this.layers[layerIdx].setZIndex(parseInt(evt.target.value, 10) || 0);
        evt.target.value = String(this.layers[layerIdx].getZIndex());
    }

    turnOff() {
        this.layers.map(item => {
            this.map.removeLayer(item);
        });
        this.map.getView().setCenter(this.originCenter);
        this.map.getView().setZoom(this.originZoom);
    }

    cancel(options?: any): any {
        this.turnOff();
    }

    createLayer(coordinates, style, zIndex) {
        const feature = new Feature(new Point(coordinates));
        feature.setStyle(style);

        const source = new VectorSource({
            features: [feature]
        });

        const vectorLayer = new VectorLayer({
            source: source
        });
        vectorLayer.setZIndex(zIndex);

        return vectorLayer;
    }
}
